/**
*@description 普通饼图
*@author yhw
*/
import React, { Component, PropTypes } from 'react';
import { connect } from 'dva';
import ReactEcharts from 'echarts-for-react';
import toExcel from '../../utils/toExcel';
import downImg from '../../utils/downImg';

const PieDouble = ({width, height, data, seriesName, labelPosition, loading, dispatch }) => {
     if(!data){return (<div className="emptyData">暂无数据</div>)}
      let option = {
            tooltip : {
                trigger: 'item',
                formatter: function(arg){
                    return arg.seriesName+'<br />'+arg.name+'：'+(parseInt(arg.value).formatMoney())+'('+arg.percent+'%)'
                }//"{a} <br/>{b} : {c} ({d}%)"
            },
            /*toolbox: {
                show: true,
                // itemSize:25,
                // iconStyle:{
                //     normal:{
                //         borderColor:'#bdbdbd'
                //     }
                // },
                right:20,
                feature: {
                    //restore: {},
                    saveAsImage: {backgroundColor:'#000000',icon : 'image://../sources/download.png?t=004', iconStyle:{emphasis:{borderColor:"#fff"}}}
                }
            },*/
            legend: {
                orient: 'vertical',
                left:'left',
                bottom: 'bottom',
                textStyle:{color:"#d5d5d5"},
                itemWidth:20,
                padding:[0, 0, 10, 50],
                data: data && data.legend || []
            },
            series : [
                {
                    name:seriesName,
                    type:'pie',
                    selectedMode: 'single',
                    radius: [0, '30%'],

                    label: {
                        normal: {
                            position: 'inner'
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:data && data.inside || []
                },
                {
                    name:seriesName,
                    type:'pie',
                    radius: ['40%', '55%'],

                    data:data && data.outside || []
                }
            ]
        };
    let timeId = 'bar'+new Date().getTime(), exExcel = function(){
        console.log(data.category, seriesName, data.value);
        toExcel(data.category, seriesName, data.value);
    };
      return (
        <div>
        <div className="downloads">
                <span className="dimg" onClick={downImg.bind(this,timeId,seriesName)}></span>
                <span className="desl" onClick={exExcel.bind(this)}></span>
          </div>
          <div id={timeId}><ReactEcharts
                option={option} 
                style={{width:width, height: height}}
                theme={"theme_name"} 
                showLoading={loading} /></div>
        </div>
      );
};

PieDouble.propTypes = {
    width:PropTypes.string.isRequired,
    height:PropTypes.number.isRequired,
    loading:PropTypes.bool,
    labelPosition:PropTypes.bool,
    seriesName:PropTypes.string,
    data: PropTypes.object
};

export default connect()(PieDouble);